<%--
  Created by IntelliJ IDEA.
  User: wzl
  Date: 2017/10/22
  Time: 22:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
    <title>Excel文件导入导出</title>
  <link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/css/webuploader.css">
</head>
<body>
<div id="uploader" class="wu-example">
  <!--用来存放文件信息-->
  <div id="thelist" class="uploader-list"></div>
  <div class="btns">
    <div id="picker">选择Excel文件</div>
  </div>
  <button id="ctlBtn" class="btn btn-default">开始上传</button>
  <div>
    <a href="<%=basePath%>/rest/excels/excelGet">导出Excel文件</a>
  </div>
  <hr/>
  <div id="showExcel">
  </div>
</div>
<script type="text/javascript" src="<%=basePath%>statics/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>statics/js/webuploader.min.js"></script>
<script>
  var uploader = WebUploader.create({
    auto: false,
    // swf文件路径
    swf:'<%=basePath%>statics/swf/Uploader.swf',

    // 文件接收服务端。
    server: '<%=basePath%>rest/excels/excelUpload',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',

    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
    resize: false ,
    duplicate: true
  });
  //验证进来的文件是否为Excel文件
  uploader.on( 'fileQueued', function( file ) {
    var fileType=file.name.substr(file.name.lastIndexOf("."));
    if(fileType=='.xls'||fileType=='.xlsx') {
      $("#thelist").append('<div id="' + file.id + '" class="item">' +
              '<h4 class="info">' + file.name + '</h4>' +
              '<p class="state">等待上传...</p>' +
              '</div>');
    }
    else{
      alert("请选择Excel文件！");
    }
  });

  uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

    // 避免重复创建
    if ( !$percent.length ) {
      $percent = $('<div class="progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
              '</div>').appendTo( $li ).find('.progress-bar');
    }

    $li.find('p.state').text('上传中');

    $percent.css( 'width', percentage * 100 + '%' );
  });

  uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).find('p.state').text('已上传');
    showAll();
  });

  uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上传出错');
  });

  uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
  });

  $("#ctlBtn").click(function(){
    console.log("上传...");
    uploader.upload();
    console.log("上传成功");
  })
  /***********Excel数据页面显示方法***********/
  function showAll(){
    $.ajax({
      type:'GET',
      dataType:'json',
      url:'rest/excels/showExcel',
      success:function(data){
        var obj=data.data;
        var listExcel="<tr><th>姓名</th><th>性别</th><th>年龄</th><th>城市</th></tr>";
        $.each(obj,function(i,n){
          listExcel+="<tr><td>"+n.name+"</td><td>"+ n.sex+"</td><td>"+ n.age+"</td><td>"+ n.city+"</td></tr>"
        });
        listExcel="<table border='1'>"+listExcel+"</table>";
        $("#showExcel").html(listExcel);
      }
    })
  }
</script>
</body>
</html>
